<style lang="less" scoped>
.refuse_pop {
  textarea {
    box-sizing: border-box;
    border: 1px solid #ebebeb;
    border-radius: 6px;
    width: 100%;
    font-size: 14px;
    padding: 5px;
    height: 1.5rem;
  }
  .page-part {
    line-height: 0;
  }
  .mint-cell-wrapper {
    background: none;
  }
}
.noDate_page {
  padding-top:2rem;
}
</style>


<template>
  <div class="gridContainer clearfix">
    <manage-header></manage-header>
    <driver-progress :status="1"></driver-progress>

    <scroller lock-x scrollbar-y use-pullup :height="scrollerHeight" @on-pullup-loading="getData" v-if="datas.length>0" :pullup-config="ScrollerConfig" ref="Scroller">
      <div class="acpt-list">

        <div class="acpt-list-wrap mb30" v-for="(item, index) in datas">
          <div class="acpt-list-head cf">
            <span class="time f-l">{{item.ATVNo}}</span>
            <em class="org f-r ft12">待接单</em>
          </div>
          <div class="displayflex acpt-list-body lineb">
            <i class="iconfont icon-cargo"></i>
            <div class="txt flex1">
              <p class="ft17">单据数： {{item.TotalOrders}}单</p>
              <p>配送路线数：{{item.AddressNum}}个送货地</p>
              <p>商品数量：{{item.TotalPKGS}} 件</p>
              <p>体积：{{item.TotalVolumn}} m³</p>
              <p>重量：{{item.TotalWeight}} kg</p>
            </div>
          </div>
          <div class="btn-grp txt-rit">
            <!-- <div class="btn ml10" @click="senddetail(item.Guid)">详情</div> -->
            <div class="btn ml10" @click="confirm(item.Guid)">接单</div>
            <!-- <div class="btn ml10 red" @click="cancel(item.Guid)">拒单</div> -->
          </div>
        </div>

      </div>

      <div v-if="noMore" class="loader-over">没有更多记录了</div>
    </scroller>
    <div class="noDate_page" v-if="datas.length === 0">
      <div class="noDate_icon">
        <i class="iconfont icon-null"></i>
      </div>暂无数据，请通知所属公司派单！
    </div>

    <!--拒单弹窗 start-->
    <x-dialog :show.sync="popupVisible">
      <div class="refuse_pop">
        <h3 class="ft16 title">拒接取货单原因</h3>
        <div class="mint-checklist page-part">
          <a class="mint-cell" v-for="(item, index) in refuseReason">
            <div class="mint-cell-wrapper" @click="selectNames(index)">
              <div class="mint-cell-title">
                <label class="mint-checklist-label">
                  <span class="mint-checkbox-label">{{item}}</span>
                  <span class="mint-checkbox is-right">
                    <input
                      type="radio"
                      class="mint-checkbox-input"
                      v-model="checkedName"
                      name="aa"
                      :value="item"
                    >
                    <span class="mint-checkbox-core"></span>
                  </span>
                </label>
              </div>
            </div>
          </a>

          <textarea placeholder="请填写其它原因" v-model="Memo" type="text" v-show="moneshow"></textarea>
        </div>
      </div>
      <div class="bottom-two-btn">
        <div class="carbtn refuse" @click="handleRefuse('0')">取消</div>
        <div class="carbtn" @click="handleRefuse('1')">确认</div>
      </div>
    </x-dialog>
    <!--拒绝弹框end-->
    <!-- 接单弹框 start -->
    <confirm v-model="show" title="是否接单?" content="接单后请及时提货" @on-cancel="" @on-confirm="onConfirm"></confirm>
    <!-- 接单弹框 end -->
    <div class="w100fix"></div>
    <footer-menu :status="1"></footer-menu>
  </div>
</template>

<script>
import manageHeader from "@/components/core/header/manage.header.vue";
import footerMenu from "@/components/core/footer/manage.footer.vue";
import driverProgress from "@/components/core/header/driver-progress.vue";
import { XDialog } from "vux";
import { mapGetters, mapState } from "vuex";

export default {
  components: {
    manageHeader,
    footerMenu,
    driverProgress,
    XDialog
  },
  data() {
    return {
      datas: [],
      popupVisible: false,
      moneshow: false,
      Memo: "",
      checkedName: "",
      show: false,
      refuseReason: ["有事无法接单", "商品数量不对", "商品破损", "其他"],
      Guid: "",
      totalRecords: 0,
      noMore: false,
      PageIndex: 1,
      PageSize: 4,
      ScrollerConfig: {
        content: "上拉加载",
        downContent: "上拉加载",
        height: 0,
        loadingContent: "加载中...",
        upContent: "上拉加载"
      }
    };
  },
  computed: {
    userinfo() {
      return JSON.parse(localStorage.userinfo);
    },
    ...mapGetters({
      scrollerHeight: "cfg/getConHeight"
    }),
  },
  created() {
  },
  mounted() {
    this.$store.dispatch("cfg/setConHeight");
    this.getData();
  },
  methods: {
    getData() {
      var query = {
        Driver1Guid: this.userinfo.StaffID,
        State: "42",
        PageIndex: this.PageIndex,
        PageSize: this.PageSize
      };
      this.Ajax.post("GetTaskorder", query).then(resp => {
        if (resp.IsSuccess) {
          this.totalRecords = resp.TotalRecords;
          if (resp.Datas && resp.Datas.length > 0) {
            this.PageIndex++;
            this.datas = this.datas.concat(resp.Datas);
            this.ScrollControl();
          }
        } else {
          this.Toast({
            message: "列表为空，请稍后刷新"
          });
        }
      });
    },
    senddetail(guid) {
      this.$router.push({
        path: "driver/senddingdetaildisptach",
        query: {
          Guid: guid
        }
      });
    },
    cancel(value) {
      this.popupVisible = true;
      this.Guid = value;
    },
    selectNames(val) {
      this.checkedName = this.refuseReason[val];
      this.Memo = this.checkedName;
      if (val == 3) {
        this.moneshow = true;
        this.Memo = "";
      } else {
        this.moneshow = false;
      }
    },
    handleRefuse(type) {
      if (type === "0") {
        this.popupVisible = false;
        this.moneshow = false;
        this.checkedName = "";
        this.Memo = "";
        return false;
      }
      if (this.checkedName=='') {
          this.Toast({
            message: "请选择拒单原因"
          });
         return false;
      }
      if (this.checkedName=='其他') {
        if (this.Memo =='') {
          this.Toast({
            message: "拒单原因没有填写"
          });
          return false;
        }
      }else{
        this.Memo = this.checkedName;
      }
      this.popupVisible = false;
      var query = {
        ATVGuid: this.Guid,
        Memo:'拒单原因：'+this.Memo
      };
      this.Ajax.post("RefusalOrder", query).then(resp => {
        if (resp.IsSuccess) {
          this.Toast({
            message: "拒单成功"
          });
          this.resetData();
        } else {
          this.Toast({
            message: "拒单失败"
          });
        }
      });
    },
    onConfirm() {
      var self = this;
      var query = {
        Guid: this.Guid,
        State: 51,
      };
      this.Ajax.post("SFYOrderApi", query).then(resp => {
        if (resp.IsSuccess) {
          this.Toast({
            message: "接单完成"
          });
          this.$router.push({
            path: "/driver/carDraw",
          });
        } else {
          this.Toast({
            message: "接单失败"
          });
        }
      });
    },
    confirm(value) {
      this.show = true;
      this.Guid = value;
    },
    ScrollControl() {
      if (this.totalRecords <= this.PageSize) {
        this.ScrollerConfig.content = "";
        this.noMore = true;
        this.$nextTick(() => {
          this.$nextTick(() => {
            this.$refs.Scroller.disablePullup();
          });
        });
      }

      if (this.datas.length > 0 && this.$refs.Scroller) {
        this.$nextTick(() => {
          this.$nextTick(() => {
            this.$refs.Scroller.donePullup();
          });
        });
      }

      if (this.totalRecords == this.datas.length) {
        this.$nextTick(() => {
          this.$nextTick(() => {
            this.$refs.Scroller.disablePullup();
            this.noMore = true;
          });
        });
      }
    },
    resetData(){
      this.datas = [],
      this.popupVisible = false,
      this.moneshow = false,
      this.Memo = "",
      this.checkedName = "",
      this.show = false,
      this.refuseReason = ["有事无法接单", "商品数量不对", "商品破损", "其他"],
      this.Guid = "",
      this.totalRecords = 0,
      this.noMore = false,
      this.PageIndex = 1,
      this.PageSize = 4,
      this.ScrollerConfig = {
        content: "上拉加载",
        downContent: "上拉加载",
        height: 0,
        loadingContent: "加载中...",
        upContent: "上拉加载"
      }
    },
  }
};
</script>
